<template>
  <div>
    <el-divider content-position="left">用药信息</el-divider>
    <div class="mb8" style="width: 100%">
      <el-button icon="folder-add" type="primary" class="ml10" @click="addDrug">
        新增用药
      </el-button>
    </div>
    <el-table size="small" :data="state.dataList" v-loading="state.loading" border
              :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
              :row-style="rowClass"
              @sort-change="sortChangeHandle">
      <el-table-column type="index" label="#" width="50"/>
      <el-table-column label="反馈用药信息" width="160">
        <template #default="scope">
          <el-button
              icon="CircleCloseFilled"
              text
              type="primary"
              v-if="scope.row.status===0"
              @click="stopDrug(scope.row)">
            停用
          </el-button>
          <el-button
              icon="edit-pen"
              text
              type="primary"
              v-if="scope.row.status===0"
              @click="changeDrug(scope.row)">
            更改计量
          </el-button>
          <el-button
              icon="CloseBold"
              text
              type="primary"
              v-if="scope.row.status===1||scope.row.status===2"
              @click="canalDrug(scope.row)">
            取消反馈
          </el-button>
          <el-button
              icon="delete"
              text
              type="primary"
              v-if="scope.row.status===3"
              @click="deleteNewData(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="drug" label="药品名称" show-overflow-tooltip/>
      <el-table-column prop="idea" label="用药方式" show-overflow-tooltip/>
      <el-table-column prop="frequency" label="用药频率" show-overflow-tooltip/>
      <el-table-column prop="unit" label="计量单位" show-overflow-tooltip/>
      <el-table-column prop="unitMedicine" label="服药计量" show-overflow-tooltip/>
      <el-table-column prop="startTime" label="开始时间" show-overflow- width="130">
        <template #default="scope">
          {{ scope.row.startTime?.substring(0, 10) }}
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="停药时间" show-overflow-tooltip width="130">
        <template #default="scope">
          {{ scope.row.endTime?.substring(0, 10) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="反馈状态" show-overflow-tooltip>
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="success">正常</el-tag>
          <el-tag v-if="scope.row.status === 1" type="warning">停用</el-tag>
          <el-tag v-if="scope.row.status === 2" type="warning">更改计量</el-tag>
          <el-tag v-if="scope.row.status === 3" type="warning">新增用药</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.updateTime?.substring(0, 10) }}
        </template>
      </el-table-column>
    </el-table>
    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandleApi" v-bind="state.pagination"/>
  </div>
</template>
<script setup lang="ts" name="drugView">
import {BasicTableProps, useTable} from "/@/hooks/table";
import {addCustomerDrug, delObjs, fetchList, updateStatus} from "/@/api/blood/bloodxCustomerDrug";
import {useMessage} from "/@/hooks/message";

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: fetchList,
  createdIsNeed: false,
})

const {
  getDataList,
  tableStyle,
  sortChangeHandle,
  currentChangeHandle,
  sizeChangeHandle,
} = useTable(state)

const deleteDrugList = ref([])


// 新增用药
const addDrug = () => {
  if (!state.queryForm.customerId) {
    return
  }
  state.dataList.push({id: "btnType" + state.dataList.length, status: 3})
}

// 删除新增用药
const deleteNewData = (row: any) => {
  if (row.id.indexOf("btnType") === -1) {
    deleteDrugList.value.push(row.id)
  }
  state.dataList = state.dataList.filter(item => item !== row)
}

// 切换页面时清空新增用药
const currentChangeHandleApi = (val: number) => {
  currentChangeHandle(val)
  deleteDrugList.value = []
}

// 反馈停药
const stopDrug = (row: any) => {
  row.status = 1
}

// 反馈计量
const changeDrug = (row: any) => {
  row.status = 2
}

// 取消反馈
const canalDrug = (row: any) => {
  row.status = 0
}

const rowClass = ({row}: any) => {
  return row.status === 1 || row.status === 2 || row.status === 3
      ? {"background-color": "#fff6e5"} : {}
}


const getData = (val: any) => {
  state.queryForm.customerId = val.id
  if (state.queryForm.customerId) {
    getDataList()
  }
}

const submitData = async () => {
  let addNum = 0
  let dtos = []
  if (!state.queryForm.customerId) {
    return
  }
  state.dataList.forEach(item => {
    if (item.status === 3 && item.id.indexOf("btnType") !== -1) {
      addNum++
    } else if (item.status === 0 || item.status === 1 || item.status === 2) {
      dtos.push({
        id: item.id,
        status: item.status
      })
    }
  })

  // 新增用药
  if (addNum > 0) {
    await addCustomerDrug({
      customerId: state.queryForm.customerId,
      num: addNum
    }).then(() => {
      useMessage().closeAll()
      useMessage().success('提交成功')
      getDataList()
    })
  }

  // 反馈状态
  if (dtos.length > 0) {
    await updateStatus(dtos).then(() => {
      getDataList()
      useMessage().closeAll()
      useMessage().success('提交成功')
    })
  }

  // 删除新增用药
  if (deleteDrugList.value.length > 0) {
    await delObjs(deleteDrugList.value);
    getDataList()
    deleteDrugList.value = []
    useMessage().closeAll()
    useMessage().success('提交成功')
  }


}

defineExpose({
  getData,
  submitData
})

</script>

<style scoped lang="scss">
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
